<template>
	<div id="list">
		<li v-for="(item,index) in dataSource">
			第{{index+1}}条<br />
			{{item.name}}
			{{item.age}}
			{{item.sign}}
			<button @click="modify(index)">修改</button>
			<button @click="deleteAction(index)">删除</button>
		</li>
	</div>
</template>

<script>
export default {
	name: "list-com",
	data(){
		return {
			dataSource: []
		}
	},
	methods:{
		//修改
		modify(index){
			this.center.$emit("listtomodify",{
				name: this.dataSource[index].name,
				age: this.dataSource[index].age,
				sign: this.dataSource[index].sign,
				index
			})
			this.center.$emit("listtoApp")
		},
		//删除
		deleteAction(index){
			this.dataSource.splice(index,1)
		}
	},
	created(){
		this.center.$on("addtolist",(data)=>{
			//添加数据
			this.dataSource.push(data)
		}),
		this.center.$on("modifytolist",(data)=>{
			//修改数据
			this.dataSource.splice(data.index,1,{
				name: data.name,
				age: data.age,
				sign: data.sign
			})
		})
	}
}
</script>

<style>
li{
	list-style: none;
	border: 2px solid #cccccc;
}
</style>